<template>
	<view class="page" :style="{paddingTop: `${topHeight}px`}" style="height: 95vh;display: flex;flex-direction: column;">
		<!-- <view class="linear" :style="{top: `-${topHeight}px`}"></view> -->
		<!--头部-->
		<view class="header">
			<view class="h-l">
				<up-icon color="#000" name="arrow-left" size="22" @tap="goBack"></up-icon>
			</view>
			<view class="h-c">
				<text>{{logObj.add_name+'的'+logObj.templete_name}}</text>
			</view>
			<view class="h-r">
				<text style="font-size: 26rpx;" @click="toMore">更多</text>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="log-content">
					<view class="log-header">
						<image :src="logObj.img_url"></image>
						<view>
							<view>{{logObj.add_name+'的'+logObj.templete_name}}</view>
							<view style="color: #909399;font-size: 26rpx;">{{logObj.log_add_time}}</view>
						</view>
					</view>
					<view class="log-body" v-for="(c,index) in JSON.parse(logObj.content)" :key="index">
						<view v-if="c.field_type == 'quill'"><text>{{c.field_name}}:</text></view>
						<view v-if="c.field_type == 'quill' && c.field_content" v-html="c.field_content"></view>
						<view v-if="c.field_type == 'quill' && !c.field_content">-</view>
						<view v-if="c.field_type == 'image'" style="display: flex;flex-wrap: wrap">
							<view v-for="img in JSON.parse(c.field_content)" style="width: 25%;height: 0; padding-bottom: 25%;box-sizing: border-box;">
								<image :src="img.url" style="width: 145rpx;height: 150rpx;" @click="previewImg(img.url)"></image>
							</view>
							
						</view>
						<view v-if="c.field_type == 'file'" v-for="file in JSON.parse(c.field_content)" @click="previewFile(file)" style="display: flex;flex-direction: row;align-items: center; padding-bottom: 10rpx;">
							<image v-if="file.name.indexOf('.doc')>0" src="/static/fileType_big/word_b.png" style="width: 80rpx;height: 80rpx;"></image>
							<image v-else-if="file.name.indexOf('.xls')>0" src="/static/fileType_big/excel_b.png" style="width: 80rpx;height: 80rpx;"></image>
							<image v-else-if="file.name.indexOf('.ppt')>0" src="/static/fileType_big/ppt_b.png" style="width: 80rpx;height: 80rpx;"></image>
							<image v-else-if="file.name.indexOf('.pdf')>0" src="/static/fileType_big/pdf_b.png" style="width: 80rpx;height: 80rpx;"></image>
							<image v-else-if="file.name.indexOf('.jpg')>0 || file.name.indexOf('.jpeg')>0 || file.name.indexOf('.png')>0" src="/static/fileType_big/image_b.png" style="width: 80rpx;height: 80rpx;"></image>
							<image v-else src="/static/fileType_big/txt_b.png" style="width: 80rpx;height: 80rpx;"></image>
							<text style="font-size: 26rpx;color: #909399;">{{file.name}}</text>
						</view>
						
					</view>
				</view>
				<view style="border-bottom: 1px solid #f0f0f0;"></view>
				<view class="page">
					<view v-if="preIndex < 0" class="btn">
						<uni-icons type="left" size="20" color="#909399"></uni-icons>
						<text style="color: #909399;">上一篇</text>
					</view>
					<view v-if="preIndex >= 0" class="btn" @click="previous(preIndex)">
						<uni-icons type="left" size="20"></uni-icons>
						<text>上一篇</text>
					</view>
					<view v-if="nextIndex == logList.length" class="btn">
						<text style="color: #909399;">下一篇</text>
						<uni-icons type="right" size="20" color="#909399"></uni-icons>
					</view>
					<view v-if="nextIndex < logList.length" class="btn" @click="next(nextIndex)">
						<text>下一篇</text>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
				<view style="background-color: #f0f0f0;height: 20rpx;"></view>
				<view>
					<up-tabs
						:list="tabs"
						@click="tabChange"
						activeStyle="#3c9cff"
						:scrollable="false"
					>
					</up-tabs>
					<view class="tabs-view">
						<view v-if="tabValue == 1" class="tabs-item1">
							<view style="color: #909399;">发送到人{{JSON.parse(logObj.lookPeopleList).length}}</view>
							<view v-for="p in JSON.parse(logObj.lookPeopleList)" class="item-avatar1">
								<image :src="p.img_url"></image>
								<view>
									<view>{{p.worker_name}}</view>
									<view style="color: #909399;font-size: 26rpx;">{{p.pos_name}}</view>
								</view>
							</view>
						</view>
						<view v-if="tabValue == 2" class="tabs-item2">
							<view v-if="JSON.parse(logObj.readList).length > 0" v-for="p in JSON.parse(logObj.readList)">
								<view class="item-avatar2">
									<image :src="p.img_url"></image>
									<text class="worker-name">{{p.worker_name}}</text>
								</view>
							</view>
							<view v-else class="empty">还没有人读过呢</view>
						</view>
						<view v-if="tabValue == 3" class="tabs-item2">
							<view v-if="JSON.parse(logObj.unreadList).length > 0" v-for="p in JSON.parse(logObj.unreadList)">
								<view class="item-avatar2">
									<image :src="p.img_url"></image>
									<text class="worker-name">{{p.worker_name}}</text>
								</view>
							</view>
							<view v-else class="empty">很棒，大家都读了</view>
						</view>
						<view v-if="tabValue == 4" class="tabs-item2">
							<view v-if="JSON.parse(logObj.thumbList).length > 0" v-for="p in JSON.parse(logObj.thumbList)">
								<view class="item-avatar2">
									<image :src="p.img_url"></image>
									<text class="worker-name">{{p.worker_name}}</text>
								</view>
							</view>
							<view v-else class="empty">还没有人赞过</view>
						</view>
					</view>
				</view>
				<view class="comment">
					<text style="font-weight: bold;">评论 {{JSON.parse(logObj.commentList).length}}</text>
					<view v-if="logObj.commentList && JSON.parse(logObj.commentList).length > 0">
						<view v-for="item in JSON.parse(logObj.commentList)" style="display: flex;flex-direction: row;font-size: 28rpx;margin-top: 20rpx;">
							<image :src="item.img_url"></image>
							<view style="margin-left: 10rpx;">
								<view style="font-weight: bold;">{{item.add_name}}</view>
								<view style="margin-top: 5rpx;">{{item.content}}</view>
								<view v-if="item.reply" style="color: #909399;margin-top: 5rpx;">
									<view style="border-left: 2px solid #909399;padding-left: 10rpx;">
										{{item.reply}}
									</view>
								</view>
								<view style="color: #909399;margin-top: 5rpx;display: flex;flex-direction: row;">
									<text style="margin-right: 15rpx;">{{item.add_time}}</text>
									<view style="margin-right: 15rpx;" @click="replyComment(item)">
										回复
									</view>
									<view v-if="item.add_phone == userInfo.phone" @click="delComment(item)">
										删除
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else style="color: #909399;text-align: center;">
						暂无评论...
					</view>
				</view>
			</scroll-view>
			<!-- <view style="flex:0 0 auto; border-bottom: 1px solid #f0f0f0;"></view> -->
			<view style="flex: 0 0 auto; width: 99vw;padding-bottom: 20rpx;">
				<view style="display: flex;flex-direction: row;padding:0 20rpx;">
					<up-input 
					    placeholder="小小鼓励，让团队更凝聚"
					    border="surround"
					    v-model="comment"
					    @focus="commentChange"
						:focus="commentFocus"
					  ></up-input>
					  <view v-if="showThumb">
						  <uni-icons v-if="logObj.isThumb" type="hand-up-filled" size="28" color="#3f85ff" @click="doThumb(logObj, 0)"></uni-icons>
						  <uni-icons v-else type="hand-up" size="28" color="#636363" @click="doThumb(logObj, 1)"></uni-icons>
					  </view>
					  <view v-else style="margin-left: 20rpx;display: flex;align-items: center;">
						  <button type="primary" size="mini" @click="sendComment(logObj)">发送</button>
					  </view>
				</view>
			</view>
		</view>
		
		<!--弹层-->
		<up-popup :show="showMore" :round="10" mode="center"  @close="closeMore">
			<view style="padding: 30rpx;width: 50vw;font-size: 28rpx;">
				<view style="margin-bottom: 30rpx;color: #909399;">查看{{logObj.add_name}}的所有日志</view>
				<view style="margin-bottom: 30rpx;color: #909399;">添加到</view>
				<view style="margin-bottom: 30rpx;color: #909399;">分享</view>
				
				<view v-if="sourceTabType==1" style="margin-bottom: 30rpx;" @click="editLog(logObj)">修改</view>
				<view v-else style="margin-bottom: 30rpx;color: #909399;">修改</view>
				
				<view style="margin-bottom: 30rpx;color: #909399;">删除</view>
				<view style="width: 100rpx;float: right;margin-bottom: 20rpx;">
					<up-button type="primary" :plain="true" text="取消" @tap="closeMore" :customStyle="{height:'30px'}"></up-button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import log from '@/apis/cloud/worklog';
	import { getCurrentInstance} from "vue";
	var _this;
	export default {
		data() {
			return {
				topHeight: 0,
				showMore:false,
				logObj:{},
				userInfo:{},
				logParams:{},
				tabs: [
					{value:1,name:'接收范围'},
					{value:2,name:'已读'},
					{value:3,name:'未读'},
					{value:4,name:'点赞'}
				],
				tabValue:1,
				comment:'',
				showThumb:true,
				commentFocus:false,
				logList:[],
				preIndex:0,
				nextIndex:0,
				sourceTabType:'',//1我发出的2我收到的3我的团队4评论点赞
			}
		},
		created(){
			_this = this;
			let app = uni.getSystemInfoSync();
			_this.topHeight = app.statusBarHeight;
		},
		onLoad(options) {
			const instance = getCurrentInstance().proxy;
			const eventChannel = instance.getOpenerEventChannel();
			eventChannel.on('logDetails', async function(data) {
				_this.sourceTabType = data.tabType;
				_this.logList = data.logList;
				let logObject = data.logObj;
				//上一篇 下一篇
				_this.logList.forEach((item,index)=>{
					if(logObject.id == item.id) {
						//console.log("onLoad=====", index);
						_this.preIndex = index-1;
						_this.nextIndex = index+1;
					}
				});
				//接收 列表点击到详情页参数
				_this.logParams = logObject;
				_this.userInfo = data.userInfo;
				
				_this.getLogDetails(logObject.id, logObject.add_id);
			});
		},
		methods: {
			//上一篇
			previous(index) {
				_this.preIndex--;
				_this.nextIndex--;
				let preLog = _this.logList.filter((item,idx)=>idx==index);
				_this.logParams.add_time = preLog[0].add_time;
				_this.getLogDetails(preLog[0].id, preLog[0].add_id);
			},
			//下一篇
			next(index) {
				_this.preIndex++;
				_this.nextIndex++;
				let nextLog = _this.logList.filter((item,idx)=>idx==index)
				_this.logParams.add_time = nextLog[0].add_time;
				_this.getLogDetails(nextLog[0].id, nextLog[0].add_id);
			},
			toMore() {
				_this.showMore = true;
			},
			closeMore() {
				_this.showMore = false;
			},
			tabChange(e) {
				_this.tabValue = e.value;
			},
			commentChange() {
				_this.showThumb = false;
			},
			//日志详情
			async getLogDetails(logId, addId) {
				const params = {
					log_id: logId,
					add_id: addId,
				}
				const res = await log.getLogDetails(params);
				if(res.status > 0) {
					_this.logObj = res.data;
					
					_this.$set(_this.logObj,'log_add_time',_this.logParams.add_time);
					let readList = [];
					let unreadList = [];
					JSON.parse(res.data.lookPeopleList).forEach(item=>{
						if(item.read_status == 1) {
							readList.push(item);
						}else {
							unreadList.push(item)
						}
					});
					_this.$set(_this.logObj,'readList',JSON.stringify(readList));
				    _this.$set(_this.logObj,'unreadList',JSON.stringify(unreadList));
					//console.log("getLogDetails=========", _this.logObj);
					
					_this.tabs.forEach(tab=>{
						if(tab.value == 2) {
							tab.name = '已读('+readList.length+')';
						}else if(tab.value == 3) {
							tab.name = '未读('+unreadList.length+')';
						}else if(tab.value == 4) {
							tab.name = '点赞('+JSON.parse(_this.logObj.thumbList).length+')';
						}
					});
					
					let thumb = JSON.parse(_this.logObj.thumbList);
					let isThumb = false;
					thumb.forEach(t=>{
						if(t.people_id == _this.userInfo.worker_id) {
							isThumb = true;
						}
					});
					_this.$set(_this.logObj,'isThumb',isThumb);
				}
			},
			//发送评论
			async sendComment(logObj) {
				let pid = logObj.commentId?logObj.commentId:'';
				let pidStr = logObj.commentIdStr?logObj.commentIdStr:'';
				const params = {
					pid:pid,
					pid_str:pidStr?pidStr+','+pid:pid,
					log_id:logObj.id,
					content:_this.comment,
					add_phone:_this.userInfo.phone,
				};
				const res = await log.saveComment(params);
				if(res.status > 0) {
					_this.logObj.commentList = JSON.stringify(res.data);
					_this.comment = '';
					_this.logObj.commentId = '';
					_this.logObj.commentIdStr = '';
				}
			},
			//回复评论
			replyComment(comment) {
				_this.comment = '回复 @'+comment.add_name+' ';
				_this.logObj.commentId = comment.id;
				_this.logObj.commentIdStr = comment.pid_str;
				//_this.$refs.commentInput.focus();
				_this.commentFocus = true;
			},
			//删除评论
			delComment(comment) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该评论吗？',
					success: function (res) {
						if (res.confirm) {
							//console.log('用户点击确定');
							_this.doDelComment(comment);
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			async doDelComment(comment) {
				const params = {
					id:comment.id,
				    log_id:comment.log_id,
				};
				const res = await log.delComment(params);
				if(res.status > 0) { 
					_this.logObj.commentList = JSON.stringify(res.data);
				}
			},
			//点赞
			async doThumb(logObj, type) {
				//console.log("doThumb=====",logObj);
				let thumb_type = 'other_thumb';
				if(logObj.add_phone == _this.userInfo.phone) {
					thumb_type = 'my_thumb';
				}
				const params = {
					type: type,
					thumb_type: thumb_type,
					id: logObj.id,
					look_people: logObj.look_people,
					people_id: _this.userInfo.worker_id,
					people_phone: _this.userInfo.phone,
				};
				const res = await log.doThumb(params);
				if(res.status > 0) {
					let thumbArr = JSON.parse(_this.logObj.thumbList);
					//无动态刷新
					if(type == 1) {
						thumbArr.push({img_url:_this.userInfo.img_url,worker_name:_this.userInfo.worker_name,thumb_status:1});
						_this.logObj.isThumb = true;
					}else {
						thumbArr = thumbArr.filter(item=>item.worker_name != _this.userInfo.worker_name);
						_this.logObj.isThumb = false;
					}
					_this.logObj.thumbList = JSON.stringify(thumbArr);
					_this.tabs.forEach(tab=>{
						if(tab.value == 4) {
							tab.name = '点赞('+JSON.parse(_this.logObj.thumbList).length+')';
						}
					});
				}
			},
			//修改日志 
			editLog(log) {
				//console.log("123=====", log)
				let name = log.templete_name;
				let type = 1;
				if(name == '周报') {
					type = 2;
				}else if(name == '月报'){
					type = 3
				}
				uni.navigateTo({
					url:'/components/worklog/writeTemplete',
					success: function (res) {
					  setTimeout(() => {
						res.eventChannel.emit('writeParams', {templete:{id:type,name:name},logObj:log});
					  }, 100);
					},
					fail() {
					 
					}
				});
			},
			//预览图片
			previewImg(url) {
				uni.previewImage({
					current: 0,
					urls: [url],
				});
			},
			//预览文件
			previewFile(file) {
				if(file.name.indexOf('.jpg')>0 || file.name.indexOf('.jpeg')>0 || file.name.indexOf('.png')>0) {
					_this.previewImg(file.url);
				}else {
					let previewUrl = `https://cloud.mfarmers.com/dist/previewDoc1.html?fileName=${file.name}&url=${file.url}&type=mobile&user=${_this.userInfo.worker_id}`
					let encodedData = encodeURIComponent(JSON.stringify({ previewUrl }));
					let url = `/pages/chat/message/previewDoc?data=${encodedData}`
					uni.navigateTo({
					  url: url
					});
				}
				
			},
			goBack () {
				uni.navigateBack({ delta: 1 });
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 50rpx;
		overflow: hidden;
	}
	.linear {
		position: absolute;
		background: linear-gradient(to bottom, #418EEB, #fff);
		width: 100%;
		height: 99vh;
	}
	.header {
		position: relative;
		z-index: 9999;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		.h-l {
			width: 30%;
			display: flex;
			flex-direction: row;
			gap: 20rpx;
		}
		.h-c {
			width: 40%;
			text-align: center;
		}
		.h-r {
			width: 30%;
			display: flex;
			justify-content: flex-end;
		}
	}
	.content {
		position: relative;
		height: 91vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		.scroll-view {
			flex: 1 1 auto;
			width: 99vw; 
			height: 80vh;
			.log-content {
				padding: 50rpx 50rpx 0 50rpx;
				.log-header {
					display: flex;
					flex-direction: row;
				}
				.log-body {
					margin-top: 20rpx;
					overflow-wrap: anywhere;
					color: #636363;
				}
			}
			.page {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20rpx;
				font-size: 28rpx;
				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.tabs-view {
				padding: 0 30rpx;
				.tabs-item1 {
					min-height: 100rpx;
					font-size: 28rpx;
					.item-avatar1 {
						display: flex;
						flex-direction: row;
						margin-top: 20rpx;
					}
				}
				.tabs-item2 {
					min-height: 100rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: flex-start;
					.item-avatar2 {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 10rpx;
						.worker-name {
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
					.empty {
						color: #909399; 
						text-align: center;
						width: 100vw;
					}
				}
			}
			.comment {
				padding: 30rpx;
			}
		}
		
		::v-deep image {
			width: 66rpx;
			height: 66rpx;
			margin-right: 10rpx;
			border-radius: 5rpx;
		}
	}
	::v-deep .u-tabs__wrapper__nav__line {
		bottom: 6px;
	}
</style>
